@radix-ui/react-toast

What is @radix-ui/react-toast?

@radix-ui/react-toast is a React component library for creating customizable and accessible toast notifications. It provides a set of components and hooks to easily integrate toast notifications into your React application.

What are @radix-ui/react-toast's main functionalities?

Basic Toast

This code demonstrates how to create a basic toast notification using @radix-ui/react-toast. The ToastProvider component wraps the application, and the Toast component is used to display the notification with a title and description.

import { ToastProvider, Toast, ToastViewport } from '@radix-ui/react-toast';

function App() {
  return (
    <ToastProvider>
      <Toast>
        <Toast.Title>Notification</Toast.Title>
        <Toast.Description>This is a basic toast notification.</Toast.Description>
      </Toast>
      <ToastViewport />
    </ToastProvider>
  );
}

Auto Dismiss

This code demonstrates how to create a toast notification that automatically dismisses after a specified duration. The 'duration' prop is set to 5000 milliseconds (5 seconds) to achieve this behavior.

import { ToastProvider, Toast, ToastViewport } from '@radix-ui/react-toast';

function App() {
  return (
    <ToastProvider>
      <Toast duration={5000}>
        <Toast.Title>Auto Dismiss</Toast.Title>
        <Toast.Description>This toast will auto-dismiss after 5 seconds.</Toast.Description>
      </Toast>
      <ToastViewport />
    </ToastProvider>
  );
}

Custom Styling

This code demonstrates how to apply custom styles to a toast notification. The 'className' prop is used to add a custom CSS class to the Toast component, allowing for custom styling through an external CSS file.

import { ToastProvider, Toast, ToastViewport } from '@radix-ui/react-toast';
import './customStyles.css';

function App() {
  return (
    <ToastProvider>
      <Toast className='custom-toast'>
        <Toast.Title>Custom Styled Toast</Toast.Title>
        <Toast.Description>This toast has custom styles applied.</Toast.Description>
      </Toast>
      <ToastViewport />
    </ToastProvider>
  );
}

Other packages similar to @radix-ui/react-toast

react-toastify

react-toastify is a popular library for adding toast notifications to React applications. It offers a wide range of customization options and is known for its ease of use. Compared to @radix-ui/react-toast, react-toastify provides more out-of-the-box features and a larger community, but may not be as focused on accessibility.

notistack

notistack is a highly customizable notification library for React. It allows stacking of notifications and provides a flexible API for managing them. Compared to @radix-ui/react-toast, notistack offers more advanced features like stacking and dismissing notifications programmatically, but may require more setup.

react-hot-toast

react-hot-toast is a lightweight and customizable toast notification library for React. It focuses on simplicity and performance, providing a minimal API for quick integration. Compared to @radix-ui/react-toast, react-hot-toast is more lightweight and easier to set up, but may lack some of the advanced customization options.

README

react-toast

Installation

$ yarn add @radix-ui/react-toast
# or
$ npm install @radix-ui/react-toast

Usage

View docs here.